<template>
  <div class="announcement-manage">
    <el-card class="announcement-card">
      <template #header>
        <div class="card-header">
          <span class="header-title">公告管理</span>
          <el-button type="primary" class="publish-btn" @click="handleAdd">发布公告</el-button>
        </div>
      </template>

      <!-- 搜索区域 -->
      <div class="search-area">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="公告标题">
            <el-input
              v-model.trim="searchForm.title"
              placeholder="请输入公告标题"
              clearable
              class="search-input"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" class="search-select" clearable>
              <el-option label="全部" value="" />
              <el-option label="已发布" value="published" />
              <el-option label="待发布" value="pending" />
              <el-option label="草稿" value="draft" />
            </el-select>
          </el-form-item>
          <el-form-item label="发布时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              class="search-date-picker"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">查询</el-button>
            <el-button icon="Refresh" class="reset-btn" @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 公告列表 -->
      <el-table 
        :data="tableData" 
        border 
        style="width: 100%" 
        v-loading="loading" 
        empty-text="暂无数据"
        class="announcement-table"
        :header-cell-style="{
          background: '#f8faff',
          color: '#303133',
          fontWeight: '600',
          fontSize: '14px'
        }"
      >
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
        <el-table-column prop="targetScope" label="发布范围" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.targetScope === 'all' ? 'success' : 'warning'" size="small" effect="light">
              {{ scope.row.targetScope === 'all' ? '全体员工' : '指定部门' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="departments" label="目标部门" width="160" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="scope.row.targetScope === 'all'">全部</span>
            <template v-else-if="scope.row.departments && scope.row.departments.length">
              <el-tag 
                v-for="(dept, index) in scope.row.departments" 
                :key="index"
                size="small"
                class="mx-1"
                type="info"
                effect="light"
              >
                {{ dept }}
              </el-tag>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="publishType" label="发布方式" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.publishType === 'immediate' ? '' : 'info'" size="small" effect="light">
              {{ scope.row.publishType === 'immediate' ? '即时发布' : '定时发布' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publishTime" label="发布时间" width="160" align="center" />
        <el-table-column label="有效期" width="180" align="center">
          <template #default="scope">
            <span>{{ formatDate(scope.row.validFrom) }} 至 {{ formatDate(scope.row.validTo) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="90" align="center">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)" size="small" effect="light">
              {{ scope.row.status === 'published' ? '已发布' : 
                 scope.row.status === 'pending' ? '待发布' : '草稿' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publisher" label="发布人" width="100" align="center" />
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template #default="scope">
            <el-button 
              link 
              type="primary" 
              @click="handleView(scope.row)"
              size="small"
              class="action-btn"
            >
              查看
            </el-button>
            <el-button 
              link 
              type="primary" 
              @click="handleEdit(scope.row)"
              v-if="scope.row.status !== 'published'"
              size="small"
              class="action-btn"
            >
              编辑
            </el-button>
            <el-button 
              link 
              type="danger" 
              @click="handleDelete(scope.row)"
              size="small"
              class="action-btn"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          class="custom-pagination"
        />
      </div>
    </el-card>

    <!-- 公告表单对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      class="announcement-dialog"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入公告标题" class="form-input" />
        </el-form-item>
        <el-form-item label="发布范围" prop="targetScope">
          <el-radio-group v-model="form.targetScope">
            <el-radio label="all">全体员工</el-radio>
            <el-radio label="department">指定部门</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item 
          label="目标部门" 
          prop="departments"
          v-if="form.targetScope === 'department'"
        >
          <el-select
            v-model="form.departments"
            multiple
            placeholder="请选择部门"
            style="width: 100%"
            class="form-select"
          >
            <el-option label="技术部" value="技术部" />
            <el-option label="人事部" value="人事部" />
            <el-option label="财务部" value="财务部" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布方式" prop="publishType">
          <el-radio-group v-model="form.publishType">
            <el-radio label="immediate">即时发布</el-radio>
            <el-radio label="scheduled">定时发布</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item 
          label="发布时间" 
          prop="scheduledTime"
          v-if="form.publishType === 'scheduled'"
        >
          <el-date-picker
            v-model="form.scheduledTime"
            type="datetime"
            placeholder="选择发布时间"
            :disabled-date="disabledDate"
            :disabled-time="disabledTime"
            class="form-date-picker"
          />
        </el-form-item>
        <el-form-item label="有效期" prop="validRange">
          <el-date-picker
            v-model="validRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DDT00:00:00"
            @change="handleValidRangeChange"
            class="form-date-picker"
          />
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="6"
            placeholder="请输入公告内容"
            class="form-textarea"
          />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            multiple
          >
            <template #trigger>
              <el-button type="primary" class="upload-btn">选择文件</el-button>
            </template>
            <el-button class="ml-3 server-upload-btn" @click="handleUpload">
              上传到服务器
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" class="cancel-btn">取消</el-button>
          <el-button @click="handleSaveDraft" v-if="!isView" class="draft-btn">存为草稿</el-button>
          <el-button type="primary" @click="handleSubmit" v-if="!isView" class="submit-btn">
            {{ form.publishType === 'immediate' ? '立即发布' : '确认发布' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import announcementApi from '@/api/admin/Announcement'

// 搜索表单
const searchForm = reactive({
  title: '',
  status: '',
  dateRange: []
})

// 表格数据
const tableData = ref([])
const loading = ref(false)

// 有效期范围
const validRange = ref([])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 对话框相关
const dialogVisible = ref(false)
const dialogType = ref('add')
const isView = ref(false)
const formRef = ref(null)
const form = reactive({
  id: '', // 编辑时需要id
  title: '',
  targetScope: 'all', // 前端用targetScope，映射到后端的targetScope
  departments: [],
  publishType: 'immediate',
  scheduledTime: '', // 定时发布时间
  content: '',
  files: [],
  validFrom: '', // 有效期开始
  validTo: '', // 有效期结束
  publisher: '系统管理员' // 默认发布者
})

// 计算属性
const dialogTitle = computed(() => {
  const titleMap = {
    add: '发布公告',
    edit: '编辑公告',
    view: '查看公告'
  }
  return titleMap[dialogType.value]
})

// 表单验证规则
const rules = {
  title: [
    { required: true, message: '请输入公告标题', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  targetScope: [
    { required: true, message: '请选择发布范围', trigger: 'change' }
  ],
  departments: [
    { 
      required: true, 
      message: '请选择目标部门', 
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (form.targetScope === 'department' && (!value || value.length === 0)) {
          callback(new Error('请选择目标部门'))
        } else {
          callback()
        }
      }
    }
  ],
  publishType: [
    { required: true, message: '请选择发布方式', trigger: 'change' }
  ],
  scheduledTime: [
    {
      required: true,
      message: '请选择发布时间',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (form.publishType === 'scheduled' && !value) {
          callback(new Error('请选择发布时间'))
        } else {
          callback()
        }
      }
    }
  ],
  content: [
    { required: true, message: '请输入公告内容', trigger: 'blur' },
    { min: 10, message: '内容不能少于10个字符', trigger: 'blur' }
  ]
}

// 获取状态对应的类型
const getStatusType = (status) => {
  const typeMap = {
    published: 'success',
    pending: 'warning',
    draft: 'info'
  }
  return typeMap[status]
}

// 禁用过去的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7
}

// 禁用过去的时间
const disabledTime = (date) => {
  if (date && date.toDateString() === new Date().toDateString()) {
    const hour = new Date().getHours()
    const minute = new Date().getMinutes()
    return {
      hours: [...Array(hour).keys()],
      minutes: minute === 59 ? [...Array(60).keys()] : [...Array(minute).keys()]
    }
  }
  return {
    hours: [],
    minutes: []
  }
}

// 获取公告列表数据
const getAnnouncementList = async () => {
  loading.value = true
  try {
    const params = {
      current: currentPage.value,
      size: pageSize.value,
      title: searchForm.title,
      status: searchForm.status,
      startDate: searchForm.dateRange && searchForm.dateRange.length > 0 ? searchForm.dateRange[0] : null,
      endDate: searchForm.dateRange && searchForm.dateRange.length > 0 ? searchForm.dateRange[1] : null
    }
    
    const res = await announcementApi.getAnnouncementList(params)
    console.log('公告列表数据:', res)
    
    if (res) {
      // 判断返回数据的结构
      if (Array.isArray(res)) {
        // 如果直接返回数组，说明不是分页结构
        tableData.value = res;
        total.value = res.length;
      } else if (res.records) {
        // 直接使用顶层的records和total
        tableData.value = res.records || [];
        total.value = res.total || 0;
        // 同步当前页和页数
        if (res.current) currentPage.value = res.current;
      } else if (res.data && res.data.records) {
        // 返回格式为 { data: { records: [], total: 0 } }
        tableData.value = res.data.records || [];
        total.value = res.data.total || 0;
      } else if (res.data && Array.isArray(res.data)) {
        // 如果data是数组
        tableData.value = res.data;
        total.value = res.data.length || 0;
      } else {
        // 其他格式，尝试直接使用
        tableData.value = [];
        total.value = 0;
      }
    } else {
      tableData.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error('获取公告列表出错', error)
    tableData.value = [];
    total.value = 0;
  } finally {
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  getAnnouncementList()
}

// 重置搜索
const resetSearch = () => {
  searchForm.title = ''
  searchForm.status = ''
  searchForm.dateRange = []
  currentPage.value = 1
  getAnnouncementList()
}

// 新增公告
const handleAdd = () => {
  dialogType.value = 'add'
  isView.value = false
  validRange.value = [] // 清空有效期
  Object.keys(form).forEach(key => {
    form[key] = key === 'targetScope' ? 'all' : 
                key === 'publishType' ? 'immediate' : 
                key === 'departments' ? [] : 
                key === 'publisher' ? '系统管理员' : ''
  })
  dialogVisible.value = true
}

// 编辑公告
const handleEdit = (row) => {
  dialogType.value = 'edit'
  isView.value = false
  
  // 复制row数据到form
  Object.keys(form).forEach(key => {
    if (key in row) {
      form[key] = row[key]
    }
  })
  
  // 特殊处理targetScope到targetScope的映射
  if (row.targetScope) {
    form.targetScope = row.targetScope
  }
  
  // 设置有效期范围
  if (row.validFrom && row.validTo) {
    validRange.value = [
      row.validFrom.substring(0, 10),
      row.validTo.substring(0, 10)
    ]
  } else {
    validRange.value = []
  }
  
  dialogVisible.value = true
}

// 查看公告
const handleView = async (row) => {
  dialogType.value = 'view'
  isView.value = true
  
  try {
    const res = await announcementApi.getAnnouncementDetail(row.id)
    console.log('公告详情数据:', res)
    
    if (res) {
      // 判断返回数据的结构
      let announcementDetail = null
      if (res.data && typeof res.data === 'object') {
        announcementDetail = res.data
      } else if (typeof res === 'object') {
        announcementDetail = res
      }
      
      if (announcementDetail) {
        // 复制详情数据到form
        Object.keys(form).forEach(key => {
          if (key in announcementDetail) {
            form[key] = announcementDetail[key] !== undefined ? announcementDetail[key] : ''
          }
        })
        
        // 特殊处理targetScope到targetScope的映射
        if (announcementDetail.targetScope) {
          form.targetScope = announcementDetail.targetScope
        }
        
        // 设置有效期范围
        if (announcementDetail.validFrom && announcementDetail.validTo) {
          validRange.value = [
            announcementDetail.validFrom.substring(0, 10),
            announcementDetail.validTo.substring(0, 10)
          ]
        } else {
          validRange.value = []
        }
        
        dialogVisible.value = true
      }
    } else {
      ElMessage.error('获取公告详情失败')
    }
  } catch (error) {
    console.error('获取公告详情出错', error)
    ElMessage.error('获取公告详情失败')
  }
}

// 删除公告
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确认删除该公告吗？删除后不可恢复。',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const res = await announcementApi.deleteAnnouncement(row.id)
      console.log('删除公告结果:', res)
      
      if (res) {
        ElMessage.success('删除成功')
        getAnnouncementList()
      } else {
        ElMessage.error('删除失败')
      }
    } catch (error) {
      console.error('删除公告出错', error)
      ElMessage.error('删除失败')
    }
  }).catch(() => {})
}

// 文件上传相关
const handleFileChange = (file) => {
  console.log('选择文件：', file)
}

const handleUpload = () => {
  ElMessage.success('文件上传成功')
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 只保留后端需要的字段
        const formData = {
          title: form.title,
          content: form.content,
          targetScope: form.targetScope, // 映射targetScope到targetScope
          departments: form.departments || [],
          publishType: form.publishType,
          validFrom: form.validFrom || new Date().toISOString(),
          validTo: form.validTo || new Date(Date.now() + 30*24*60*60*1000).toISOString(), // 默认30天后
          publisher: form.publisher || '系统管理员'
        }
        
        // 如果是编辑模式，添加id字段
        if (dialogType.value === 'edit' && form.id) {
          formData.id = form.id
        }
        
        console.log('提交公告数据:', formData)
        
        let res
        if (dialogType.value === 'add') {
          res = await announcementApi.addAnnouncement(formData)
        } else {
          res = await announcementApi.updateAnnouncement(formData)
        }
        
        console.log('提交公告结果:', res)
        
        if (res) {
          if (form.publishType === 'immediate') {
            ElMessage.success('公告已发布')
          } else {
            ElMessage.success('公告将在指定时间发布')
          }
          dialogVisible.value = false
          getAnnouncementList()
        } else {
          ElMessage.error('发布失败')
        }
      } catch (error) {
        console.error('提交公告出错', error)
        ElMessage.error('发布失败')
      }
    }
  })
}

// 存为草稿
const handleSaveDraft = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 只保留后端需要的字段
        const formData = {
          title: form.title,
          content: form.content,
          targetScope: form.targetScope, // 映射targetScope到targetScope
          departments: form.departments || [],
          publishType: 'draft', // 草稿模式
          validFrom: form.validFrom || new Date().toISOString(),
          validTo: form.validTo || new Date(Date.now() + 30*24*60*60*1000).toISOString(), // 默认30天后
          publisher: form.publisher || '系统管理员'
        }
        
        // 如果是编辑模式，添加id字段
        if (dialogType.value === 'edit' && form.id) {
          formData.id = form.id
        }
        
        console.log('保存草稿数据:', formData)
        
        let res
        if (dialogType.value === 'add') {
          res = await announcementApi.addAnnouncement(formData)
        } else {
          res = await announcementApi.updateAnnouncement(formData)
        }
        
        console.log('保存草稿结果:', res)
        
        if (res) {
          ElMessage.success('已保存为草稿')
          dialogVisible.value = false
          getAnnouncementList()
        } else {
          ElMessage.error('保存草稿失败')
        }
      } catch (error) {
        console.error('保存草稿出错', error)
        ElMessage.error('保存草稿失败')
      }
    }
  })
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  getAnnouncementList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getAnnouncementList()
}

// 处理有效期变化
const handleValidRangeChange = (val) => {
  if (val && val.length === 2) {
    form.validFrom = val[0]
    form.validTo = val[1].replace('T00:00:00', 'T23:59:59') // 设置结束时间为当天最后一秒
  } else {
    form.validFrom = ''
    form.validTo = ''
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-';
  // 只保留日期部分
  if (dateStr.includes('T')) {
    return dateStr.split('T')[0];
  }
  return dateStr;
}

// 页面加载时获取数据
onMounted(() => {
  getAnnouncementList()
})
</script>

<style scoped lang="scss">
.announcement-manage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .announcement-card {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
    
    &:hover {
      box-shadow: 0 12px 32px rgba(24, 144, 255, 0.1);
      transform: translateY(-2px);
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: #1890ff;
        border-radius: 2px;
      }
    }
    
    .publish-btn {
      background: linear-gradient(135deg, #1890ff, #36a6ff);
      border: none;
      border-radius: 20px;
      padding: 8px 24px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
      
      &:hover {
        background: linear-gradient(135deg, #40a9ff, #5cbbff);
        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
        transform: translateY(-2px);
      }
      
      &:active {
        background: linear-gradient(135deg, #096dd9, #1890ff);
        transform: translateY(0);
      }
    }
  }

  .search-area {
    margin: 20px 0;
    padding: 20px;
    background-color: #f8faff;
    border-radius: 8px;
    
    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #606266;
    }
    
    .search-input {
      width: 220px;
      
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
        
        &:hover, &.is-focus {
          box-shadow: 0 0 0 1px #1890ff inset;
        }
      }
    }
    
    .search-select {
      width: 120px;
      
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
        
        &:hover, &.is-focus {
          box-shadow: 0 0 0 1px #1890ff inset;
        }
      }
    }
    
    .search-date-picker {
      width: 340px;
      
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
        
        &:hover, &.is-focus {
          box-shadow: 0 0 0 1px #1890ff inset;
        }
      }
    }
    
    .search-btn {
      background: linear-gradient(135deg, #1890ff, #36a6ff);
      border: none;
      border-radius: 20px;
      padding: 8px 16px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
      margin-right: 10px;
      
      .el-icon {
        margin-right: 4px;
      }
      
      &:hover {
        background: linear-gradient(135deg, #40a9ff, #5cbbff);
        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
        transform: translateY(-2px);
      }
      
      &:active {
        background: linear-gradient(135deg, #096dd9, #1890ff);
        transform: translateY(0);
      }
    }
    
    .reset-btn {
      background: #f5f7fa;
      color: #606266;
      border: none;
      border-radius: 20px;
      padding: 8px 16px;
      transition: all 0.3s ease;
      
      .el-icon {
        margin-right: 4px;
      }
      
      &:hover {
        background: #e6f7ff;
        color: #1890ff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
      }
      
      &:active {
        background: #dcf0fd;
        transform: translateY(0);
      }
    }
  }
  
  .announcement-table {
    margin: 16px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    
    :deep(.el-table__row) {
      transition: all 0.3s;
      
      &:hover {
        background-color: #f8faff !important;
      }
    }
    
    :deep(.el-table__cell) {
      padding: 10px 0;
    }
    
    :deep(.el-tag) {
      padding: 0 10px;
      height: 28px;
      line-height: 28px;
      border-radius: 4px;
      font-weight: 500;
      font-size: 12px;
      
      &.el-tag--success {
        background-color: rgba(82, 196, 26, 0.08);
        border-color: rgba(82, 196, 26, 0.2);
        color: #52c41a;
      }
      
      &.el-tag--warning {
        background-color: rgba(250, 173, 20, 0.08);
        border-color: rgba(250, 173, 20, 0.2);
        color: #faad14;
      }
      
      &.el-tag--info {
        background-color: rgba(144, 147, 153, 0.08);
        border-color: rgba(144, 147, 153, 0.2);
        color: #909399;
      }
      
      &.el-tag--danger {
        background-color: rgba(245, 34, 45, 0.08);
        border-color: rgba(245, 34, 45, 0.2);
        color: #f5222d;
      }
      
      &.mx-1 {
        margin: 0 4px;
      }
    }
    
    .action-btn {
      font-size: 13px;
      font-weight: 500;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        opacity: 0.8;
      }
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
    
    :deep(.custom-pagination) {
      padding: 0;
      
      .el-pagination__total {
        margin-right: 16px;
        color: #606266;
        font-weight: 500;
      }
      
      .el-pagination__sizes {
        margin-right: 16px;
        
        .el-select .el-input {
          width: 110px;
          
          .el-input__wrapper {
            background-color: #f5f7fa;
            border-radius: 20px;
          }
        }
      }
      
      button {
        background-color: #f5f7fa;
        border-radius: 4px;
        margin: 0 3px;
        color: #606266;
        transition: all 0.2s ease;
        
        &:hover {
          color: #1890ff;
          background-color: #e6f7ff;
        }
        
        &:disabled {
          color: #c0c4cc;
        }
      }
      
      .btn-prev, .btn-next {
        padding: 0 8px;
        
        &:hover {
          background-color: #e6f7ff;
        }
      }
      
      .el-pager {
        li {
          background-color: #f5f7fa;
          border-radius: 4px;
          margin: 0 3px;
          color: #606266;
          font-weight: 500;
          min-width: 32px;
          transition: all 0.2s ease;
          
          &:hover {
            color: #1890ff;
            background-color: #e6f7ff;
          }
          
          &.is-active {
            background-color: #1890ff;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
            
            &:hover {
              background-color: #40a9ff;
            }
          }
        }
      }
      
      .el-pagination__jump {
        margin-left: 16px;
        color: #606266;
        
        .el-input__wrapper {
          background-color: #f5f7fa;
          border-radius: 4px;
        }
      }
    }
  }
  
  .announcement-dialog {
    border-radius: 12px;
    overflow: hidden;
    
    :deep(.el-dialog__header) {
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;
      margin: 0;
      
      .el-dialog__title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
    }
    
    :deep(.el-dialog__body) {
      padding: 24px;
    }
    
    :deep(.el-dialog__footer) {
      padding: 16px 20px;
      border-top: 1px solid #f0f0f0;
    }
    
    :deep(.el-form-item__label) {
      font-weight: 600;
      color: #606266;
    }
    
    .form-input {
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
        transition: all 0.3s;
        
        &:hover, &:focus {
          box-shadow: 0 0 0 1px #1890ff inset;
        }
      }
    }
    
    .form-select {
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
        transition: all 0.3s;
        
        &:hover, &:focus {
          box-shadow: 0 0 0 1px #1890ff inset;
        }
      }
    }
    
    .form-date-picker {
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
        transition: all 0.3s;
        
        &:hover, &:focus {
          box-shadow: 0 0 0 1px #1890ff inset;
        }
      }
    }
    
    .form-textarea {
      :deep(.el-textarea__inner) {
        border-radius: 8px;
        padding: 10px 12px;
        min-height: 120px !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
        transition: all 0.3s;
        
        &:hover, &:focus {
          box-shadow: 0 0 0 1px #1890ff inset;
        }
      }
    }
    
    .upload-btn {
      background: linear-gradient(135deg, #1890ff, #36a6ff);
      border: none;
      border-radius: 8px;
      transition: all 0.3s;
      
      &:hover {
        background: linear-gradient(135deg, #40a9ff, #5cbbff);
        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
        transform: translateY(-2px);
      }
    }
    
    .server-upload-btn {
      background: #f5f7fa;
      color: #606266;
      border: none;
      border-radius: 8px;
      transition: all 0.3s;
      
      &:hover {
        background: #e6f7ff;
        color: #1890ff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
      }
    }
    
    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      
      .el-button {
        border-radius: 8px;
        padding: 8px 20px;
        font-weight: 500;
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
      }
      
      .cancel-btn {
        background: #f5f7fa;
        color: #606266;
        border: none;
        
        &:hover {
          background: #e6f7ff;
          color: #909399;
        }
      }
      
      .draft-btn {
        background: #f8f9fa;
        color: #1890ff;
        border: 1px solid #1890ff;
        
        &:hover {
          background: #e6f7ff;
          border-color: #40a9ff;
          color: #40a9ff;
        }
      }
      
      .submit-btn {
        background: linear-gradient(135deg, #1890ff, #36a6ff);
        border-color: #1890ff;
        
        &:hover {
          background: linear-gradient(135deg, #40a9ff, #5cbbff);
          border-color: #40a9ff;
          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
        }
        
        &:active {
          background: linear-gradient(135deg, #096dd9, #1890ff);
          border-color: #096dd9;
          transform: translateY(0);
        }
      }
    }
  }
}
</style>